(function($) {
 /** 
  * 默认参数 
  */ 
 var defaultOpts = { 
  stage:".photocontent", //舞台 .warpboxpannel
  item: '', //可缩放的类名 
  resizePanel:"",
  binding:"",
  warpdiv:""
 }; 
 
 /** 
  * 定义类 
  */ 
 var ZResize = function(options) { 
  this.options = $.extend({}, defaultOpts, options); 
  this.init(); 
 } 
 
 ZResize.prototype = { 
  init: function() { 
   this.initResizeBox(); 
    var self=this;
   $(".resize-panel").dblclick(function(e){
        e.stopPropagation();
   })
   
    $(".resize-panel").click(function(e){
        
        var temp=self.options.binding.rawName.split('.');
        e.stopPropagation();
   })
    self.options.item.addEventListener('click',function(e){
        e.stopPropagation();
    })
    if($(".resize-panel").css("z-index")!="1"){
        $(".resize-panel").on("keydown",function(e){
            if(e.keyCode==46||e.keyCode==8){
                self.options.binding.value._self.deldomFn();
            }
    })
    }
    
    
  }, 
  /** 
   * 初始化拖拽item 
   */ 
  initResizeBox: function() {
      console.log("插件启用")
   var self = this;
   var odiv = this.options.item;
    //创建面板
    
    window.width = odiv.offsetWidth; 
    window.height = odiv.offsetHeight; 
    window.transform =odiv.style.transform
    window.otop=odiv.offsetTop;
    window.oleft=odiv.offsetLeft;
    window.zindex=parseInt(odiv.style.zIndex)+1;
    if($(".resize-panel").length==0){       
        self.options.resizePanel = $('<div class="resize-panel"></div>'); 
        self.options.resizePanel.css({ 
            transform:transform,
            width: width, 
            height: height, 
            top:otop, 
            left:oleft, 
            position: 'absolute', 
            'background-color': 'rgba(0,0,0,0.2)', 
            cursor: 'move', 
            display: 'none',
            border:"1px solid #FE9333",
            outline:"none",
            visibility: "visible",
            'z-index':zindex,
            //"-webkit-transform": "translateZ(0)",

        }); 
        
        self.checkappendHandler(self.options.resizePanel[0],self.options.item); 
        /** 
         * 创建控制点 
         */ 
        var n = $('<div class="n"></div>');//北 
        var s = $('<div class="s"></div>');//南 
        var w = $('<div class="w"></div>');//西 
        var e = $('<div class="e"></div>');//东 
        var ne = $('<div class="ne"></div>');//东北 
        var nw = $('<div class="nw"></div>');//西北 
        var se = $('<div class="se"></div>');//东南 
        var sw = $('<div class="sw"></div>');//西南 
        //添加公共样式 
        self.addHandlerCss([n, s, w, e, ne, nw, se, sw]); 
        //添加各自样式 
        n.css({ 
        'top': '-4px', 
        'margin-left': '-4px', 
        'left': '50%', 
        'cursor': 'n-resize' 
        }); 
        s.css({ 
        'bottom': '-4px', 
        'margin-left': '-4px', 
        'left': '50%', 
        'cursor': 's-resize' 
        }); 
        e.css({ 
        'top': '50%', 
        'margin-top': '-4px', 
        'right': '-4px', 
        'cursor': 'e-resize' 
        }); 
        w.css({ 
        'top': '50%', 
        'margin-top': '-4px', 
        'left': '-4px', 
        'cursor': 'w-resize' 
        }); 
        ne.css({ 
        'top': '-4px', 
        'right': '-4px', 
        'cursor': 'ne-resize' 
        }); 
        nw.css({ 
        top: '-4px', 
        'left': '-4px', 
        'cursor': 'nw-resize' 
        }); 
        se.css({ 
        'bottom': '-4px', 
        'right': '-4px', 
        'cursor': 'se-resize' 
        }); 
        sw.css({ 
            'bottom': '-4px', 
            'left': '-4px', 
            'cursor': 'sw-resize' 
        }); 
        // 添加项目 
        self.appendHandler([n, s, w, e, ne, nw, se, sw], self.options.resizePanel); 
        
        //绑定拖拽缩放事件 
        self.bindResizeEvent(self.options.resizePanel, $(this)); 
    
        //绑定触发事件 
        self.bindTrigger(odiv,self.options.resizePanel);
        self.binddblTrigger(odiv,self.options.resizePanel)
        self.bindHidePanel(odiv); 
    }
    else{
        //self.options.item
        var a=$(".resize-panel");
        $(".resize-panel").remove();
        var temp=self.options.binding.rawName.split('.');
        self.checkappendHandler(a[0],self.options.item); 
        if(window.checkflag==temp[2]||window.checkflag==$(".resize-panel").next().attr("index")+temp[4]){
            a.css({ 
                transform:transform,
                width: width, 
                height: height, 
                top:otop, 
                left:oleft, 
                position: 'absolute', 
                'background-color': 'rgba(0,0,0,0.2)', 
                cursor: 'move', 
                display: 'none',
                border:"1px solid #FE9333",
                'z-index':1
            }); 
        }
        else{
            a.css({ 
                transform:transform,
                width: width, 
                height: height, 
                top:otop, 
                left:oleft, 
                position: 'absolute', 
                'background-color': 'rgba(0,0,0,0.2)', 
                cursor: 'move', 
                display: 'none',
                border:"1px solid #FE9333",
                'z-index':zindex
            }); 
        }
        //绑定拖拽缩放事件 
        self.bindResizeEvent(a, $(this)); 
        //绑定触发事件 
        self.bindTrigger(odiv,a[0]);
        self.binddblTrigger(odiv,a[0])
        self.bindHidePanel(odiv); 
    }
   }, 
  //控制点公共样式 
  addHandlerCss: function(els) {
    var el;
   for(var i = 0; i < els.length; i++) { 
    el = els[i]; 
    el.css({ 
     position: 'absolute', 
     width: '8px', 
     height: '8px',
     padding:'2px', 
     background: '#FE9333', 
     margin: '0', 
     'border-radius': '5px', 
     border: '2px solid #FE9333'
    }); 
   } 
  }, 
  /** 
   * 插入容器 
   */ 
  appendHandler: function(handlers, target) { 
   for(var i = 0; i < handlers.length; i++) { 
    target.append(handlers[i]); 
   } 
  }, 
  /** 
   * 插入到当前容器下面 
   */ 
  checkappendHandler: function(handlers, target) {
      var self=this;
      if($(".photocontent").length==0){
        return;
      }//没这个元素直接return;

      var temp=self.options.binding.rawName.split('.');
        if(temp.length==3){
            $(".photobox .photocontent>div")[0].insertBefore(handlers,target);
        }
        else if(temp.length==4){
            $(".photobox .photocontent>div")[0].insertBefore(handlers,target);
        }
        else if(temp.length==7){
            $(".photobox .photocontent>div")[0].insertBefore(handlers,target);
        }
        else{
            $(".photobox ."+self.options.warpdiv+"")[0].insertBefore(handlers,target);
        }
     //
     
  }, 
  /** 
   * 显示拖拽面板 
   */ 
  triggerResize: function(el,objel) {
      var self=this;
    $(".resize-panel").show();
    self.options.binding.value._self.wrapright=true;
    }, 
  /** 
   * 拖拽事件控制 包含8个缩放点 和一个拖拽位置 
   */ 
  bindResizeEvent: function(el) { 
   var self = this;
   
   var temp=self.options.binding.rawName.split('.');
   var ox = 0; //原始事件x位置 
   var oy = 0; //原始事件y位置 
   var ow = 0; //原始宽度 
   var oh = 0; //原始高度 
 
   var oleft = 0; //原始元素位置 
   var otop = 0; 
   var org = el.next();
 
   //东 
   var emove = false; 
   el.on('mousedown','.e', function(e) { 
    ox = e.pageX;//原始x位置 
    ow = el.width(); 
    emove = true;
   }); 
 
   //南 
   var smove = false; 
   el.on('mousedown','.s', function(e) { 
    oy = e.pageY;//原始x位置 
    oh = el.height(); 
    smove = true;
   }); 
 
   //西 
   var wmove = false; 
   el.on('mousedown','.w', function(e) { 
    ox = e.pageX;//原始x位置 
    ow = el.width(); 
    wmove = true; 
    oleft = parseInt(org.css('left').replace('px', '')); 
   }); 
 
   //北 
   var nmove = false; 
   el.on('mousedown','.n', function(e) { 
    oy = e.pageY;//原始x位置 
    oh = el.height(); 
    nmove = true; 
    otop = parseInt(org.css('top').replace('px', '')); 
   }); 
 
   //东北 
   var nemove = false; 
   el.on('mousedown','.ne', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    nemove = true; 
    otop = parseInt(org.css('top').replace('px', '')); 
   }); 
 
   //西北 
   var nwmove = false; 
   el.on('mousedown','.nw', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    otop = parseInt(org.css('top').replace('px', '')); 
    oleft = parseInt(org.css('left').replace('px', '')); 
    nwmove = true;
   }); 
 
   //东南 
   var semove = false; 
   el.on('mousedown','.se', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    semove = true;
   }); 
 
   //西南 
   var swmove = false; 
   el.on('mousedown','.sw', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY; 
    ow = el.width(); 
    oh = el.height(); 
    swmove = true; 
    oleft = parseInt(org.css('left').replace('px', '')); 
   }); 
 
   //拖拽 
   var drag = false; 
   el.on('mousedown', function(e) { 
    ox = e.pageX;//原始x位置 
    oy = e.pageY;
    var owidth=el.width();
    var oheight=el.height();
    otop = parseInt(org.css('top').replace('px', '')); 
    oleft = parseInt(org.css('left').replace('px', ''));
    var disX = ox -oleft;
    var disY =oy - otop;
    drag = true; 
    $(self.options.stage).on('mousemove', function(e) { 
        if(emove) { 
        var x = (e.pageX - ox); 
        el.css({ 
        width: ow + x 
        }); 
        org.css({ 
        width: ow + x 
        }); 
        } else if(smove) { 
        var y = (e.pageY - oy); 
        el.css({ 
        height: oh + y 
        }); 
        org.css({ 
        height: oh + y 
        }); 
        } else if(wmove) { 
        var x = (e.pageX - ox); 
        el.css({ 
            width: ow - x, 
            left: oleft + x 
        }); 
        org.css({ 
            width: ow - x, 
            left: oleft + x 
        }); 
        } else if(nmove) { 
        var y = (e.pageY - oy); 
        el.css({ 
            height: oh - y, 
            top: otop + y 
        }); 
        org.css({ 
            height: oh - y, 
            top: otop + y 
        }); 
        } else if(nemove) { 
        var x = e.pageX - ox; 
        var y = e.pageY - oy;
        if(-x>y){
            y=-parseInt((x/owidth)*oheight);
        }
        else{
            x=-parseInt((y/oheight)*owidth);
        }
        el.css({ 
            height: oh - y, 
            top: otop + y, 
            width: ow + x 
        }); 
        org.css({ 
            height: oh - y, 
            top: otop + y, 
            width: ow + x 
        }); 
        } else if(nwmove) { 
        var x = e.pageX - ox; 
        var y = e.pageY - oy; 
        if(x>y){
            y=parseInt((x/owidth)*oheight);
        }
        else{
            x=parseInt((y/oheight)*owidth);
        }
        el.css({ 
            height: oh - y, 
            top: otop + y, 
            width: ow - x, 
            left: oleft + x 
        }); 
        org.css({ 
            height: oh - y, 
            top: otop + y, 
            width: ow - x, 
            left: oleft + x 
        }); 
        } else if(semove) {
        var x = e.pageX - ox; 
        var y = e.pageY - oy; 
        if(x>y){
            y=parseInt((x/owidth)*oheight);
        }
        else{
            x=parseInt((y/oheight)*owidth);
        }
        el.css({ 
            width: ow + x, 
            height: oh + y 
        }); 
        org.css({ 
            width: ow + x, 
            height: oh + y 
        }); 
        } else if(swmove) {
            
        var x =e.pageX - ox; 
        var y =e.pageY - oy;
        if(-x>y){
            y=-parseInt((x/owidth)*oheight);
        }
        else{
            x=-parseInt((y/oheight)*owidth);
        }
        el.css({ 
            width: ow - x, 
            left: oleft + x, 
            height: oh + y 
        }); 
        org.css({ 
            width: ow - x, 
            left: oleft + x, 
            height: oh + y 
        });
    } else if(drag) { 
            
            var x = e.pageX - ox; 
            var y = e.pageY - oy; 
            org.css({ 
                left: oleft + x, 
                top: otop + y 
            }); 
            el.css({ 
                left: oleft + x, 
                top: otop + y
            }); 
            return false;
        } 
         e.stopPropagation()
        //return false;
    })
    function a(obj,athis){
        //判断是否拖动
        
            if(obj)
            {
                if(temp.length==3||temp.length==7){
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][temp[2]],"width",self.options.item.offsetWidth+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][temp[2]],"height",self.options.item.offsetHeight+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][temp[2]],"top",self.options.item.offsetTop+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][temp[2]],"left",self.options.item.offsetLeft+'px');
                    self.options.binding.value._self.$options.methods.advanceFN(self.options.binding.value._self,self.options.binding.value._self[temp[1]]);
                    self.options.binding.value._self.$set(self.options.binding.value._self,"texthide",false);
                    $(athis).off('mouseup');
                    $(athis).off('mousemove');
                    //
                }
                else if(temp.length==5){
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[3]][temp[2]][$(".resize-panel").next().attr("index")][temp[4]],"width",$(".resize-panel").next()[0].offsetWidth+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[3]][temp[2]][$(".resize-panel").next().attr("index")][temp[4]],"height",$(".resize-panel").next()[0].offsetHeight+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[3]][temp[2]][$(".resize-panel").next().attr("index")][temp[4]],"top",$(".resize-panel").next()[0].offsetTop+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[3]][temp[2]][$(".resize-panel").next().attr("index")][temp[4]],"left",$(".resize-panel").next()[0].offsetLeft+'px');
                    self.options.binding.value._self.$options.methods.advanceFN(self.options.binding.value._self,self.options.binding.value._self[temp[3]])
                    self.options.binding.value._self.$set(self.options.binding.value._self,"texthide",false);
                    $(athis).off('mouseup');
                    $(athis).off('mousemove');
                }
                else if(temp.length==4){
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][$(".resize-panel").next().attr("index")][temp[2]],"width",self.options.item.offsetWidth+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][$(".resize-panel").next().attr("index")][temp[2]],"height",self.options.item.offsetHeight+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][$(".resize-panel").next().attr("index")][temp[2]],"top",self.options.item.offsetTop+'px');
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[1]][$(".resize-panel").next().attr("index")][temp[2]],"left",self.options.item.offsetLeft+'px');
                    
                    self.options.binding.value._self.$set(self.options.binding.value._self[temp[3]],[temp[4]],self.options.binding.value._self[temp[1]]);
                    self.options.binding.value._self.$options.methods.advanceFN(self.options.binding.value._self,self.options.binding.value._self[temp[3]])
                    $(athis).off('mouseup');
                    $(athis).off('mousemove');
                }
            }
    }
    $(document).off().on('mouseup', function(e) { 
        a((emove||smove||wmove||nmove||nemove||swmove||semove||nwmove||drag),this);
        
        emove = false; 
        smove = false; 
        wmove = false; 
        nmove = false; 
        nemove = false; 
        nwmove = false; 
        swmove = false; 
        semove = false; 
        drag = false;
        e.stopPropagation()
        });
   }); 
 
   
  }, 
  /** 
   * 点击item显示拖拽面板 
   */ 
  bindTrigger: function(el,odiv) { 
   var self = this;
    if($(".resize-panel")[0].style.zIndex==0){
        return;
    }
    else{
        self.triggerResize(odiv,el);
    }
    
  }, 
    /** 
   * 双击item显示拖拽面板 
   */ 
  binddblTrigger: function(el,odiv) { 
   var self = this;
   var temp=self.options.binding.rawName.split('.');
   
    $(".resize-panel").on('dblclick',function(e){
        function qcheck(text){
            if (document.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(text);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(text);
                selection.removeAllRanges();
                selection.addRange(range);
                
            }
        }
        $(".resize-panel")[0].style.zIndex=0;
        
        if(temp.length==3){
            qcheck($(".resize-panel").next()[0])
            if(temp[2]=="introductionDayStyle"){
                window.checkflag=temp[2];
                console.log(self.options.binding.value._self[temp[1]][temp[2]]);
                self.options.binding.value._self.breviarysytle=self.options.binding.value._self[temp[1]][temp[2]];
                self.options.binding.value._self.texthide=false;
                self.options.binding.value._self.breviarytext=true;
                var w=$(this).position().left-($(".setText").width()-$(this).width())/2;
                var h=parseInt($(this).css("top"))-20-$(".setText").outerHeight();
                $(".setText").css({"top":h+100,"left":w,"position":"absolute"})
                $(".resize-panel").next()[0]
            }
            else{
                qcheck($(".resize-panel").next()[0])
                var t=$(".resize-panel").next().text();
                $(".resize-panel").next()[0]
                $(".resize-panel").next().attr("contenteditable",true).focus()
                window.checkflag=temp[2];
                self.options.binding.value._self.breviarysytle=self.options.binding.value._self[temp[1]][temp[2]];
                self.options.binding.value._self.editflag=true;
                self.options.binding.value._self.texthide=false;
                self.options.binding.value._self.breviarytext=true;
                var w=$(this).position().left-($(".setText").width()-$(this).width())/2;
                var h=parseInt($(this).css("top"))-20-$(".setText").outerHeight();
                $(".setText").css({"top":h+100,"left":w,"position":"absolute"})
            }
            
        }
        else if(temp.length==4){
            $(".resize-panel")[0].style.zIndex=self.options.binding.value._self.zdindex;
            if(temp[1]=="headersp"){//双击视频框
                self.options.binding.value._self.myspfn(1,2,true)
            }
            else{//双击图片框
                
                self.options.binding.value._self.imgphototype(5);
            }
            
        }
        else if(temp.length==5){
            qcheck($(".resize-panel").next()[0])
            window.checkflag=$(".resize-panel").next().attr("index")+temp[4];
            var t=$(".resize-panel").next().text()
            $(".resize-panel").next().attr("contenteditable",true).focus()
            self.options.binding.value._self.breviarysytle=self.options.binding.value._self[temp[3]][temp[2]][$(".resize-panel").next().attr("index")][temp[4]];
            self.options.binding.value._self.editflag=true;
            self.options.binding.value._self.texthide=false;
            self.options.binding.value._self.breviarytext=true;
            var w=$(this).position().left-($(".setText").width()-$(this).width())/2;
            var h=parseInt($(this).css("top"))-$(this).outerHeight()-$(".setText").outerHeight();
            $(".setText").css({"top":h+100,"left":w,"position":"absolute"})
        }
        //$(this).off()
    })

    self.triggerResize(odiv,el);
  }, 
  /** 
   * 点击舞台空闲区域 隐藏缩放面板 
   */ 
  bindHidePanel: function(el) { 
   var self = this;
   var stage = this.options.stage; 
   var item = this.options.item; 
   $(stage).bind('click', function(e) {
       
        //$(".resize-panel").hide(); 
        self.options.binding.value._self.wraphide();
        // e.stopPropagation();
        }) 
    } 
    } 
 
 window.ZResize = ZResize; 
 
})(jQuery);